import Vue from "vue";
import Vuex from "vuex";
import compose from "./compose";
import layer from "./layer";

Vue.use(Vuex);

const data = {
  state: {
    ...compose.state,
    canvasStyleData: {
      // 页面全局数据
      width: 1200,
      height: 740,
      scale: 100,
      backgroundColor: "#fff",
    },
    componentData: [], // 画布组件数据
    curComponent: null,
    curComponentIndex: null,
    // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
    isClickComponent: false,
    editMode: "edit", // 编辑器模式 edit preview
  },
  mutations: {
    ...compose.mutations,
    ...layer.mutations,

    addComponent(state, { component, index }) {
      if (index !== undefined) {
        state.componentData.splice(index, 0, component);
      } else {
        state.componentData.push(component);
      }
    },

    setClickComponentStatus(state, status) {
      state.isClickComponent = status;
    },

    setEditMode(state, mode) {
      state.editMode = mode;
    },

    setCurComponent(state, { component, index }) {
      state.curComponent = component;
      state.curComponentIndex = index;
    },

    setShapeStyle({ curComponent }, { top, left, width, height, rotate }) {
      if (top) curComponent.style.top = top;
      if (left) curComponent.style.left = left;
      if (width) curComponent.style.width = width;
      if (height) curComponent.style.height = height;
      if (rotate) curComponent.style.rotate = rotate;
    },

    deleteComponent(state, index) {
      if (index === undefined) {
        index = state.curComponentIndex;
      }

      if (index == state.curComponentIndex) {
        state.curComponentIndex = null;
        state.curComponent = null;
      }

      if (/\d/.test(index)) {
        state.componentData.splice(index, 1);
      }
    },
  },
};

export default new Vuex.Store(data);
